<template>
	<!-- 调用组件-->
	<div class="home">
		<home-header></home-header>
		<home-swipers :swiperList='swiperList'></home-swipers>
		<home-icons :IconList='IconList'></home-icons>
		<home-activity></home-activity>
		<home-local></home-local>
		<home-hot :HotList='HotList'></home-hot>
		<home-like :LikeList='LikeList'></home-like>
		<home-week :WeekList='WeekList'></home-week>
		<home-foot></home-foot>
	</div>

</template>

<script>
	//引入Header.vue
	import HomeHeader from './pages/Header'
	import HomeSwipers from './pages/Swipers'
	import HomeIcons from './pages/Icons'
	import HomeActivity from './pages/Activity'
	import HomeLocal from './pages/Local'
	import HomeHot from './pages/Hot'
	import HomeLike from './pages/Like'
	import HomeWeek from './pages/Week'
	import HomeFoot from './pages/Foot'
	import axios from 'axios'
	
	export default {
		components: {
			HomeHeader,
				HomeSwipers,
				HomeIcons,
				HomeActivity,
				HomeLocal,
				HomeHot,
				HomeLike,
				HomeWeek,
				HomeFoot
		},
		data(){
			return{
				swiperList:[],
				IconList:[],
				HotList:[],
				LikeList:[],
				WeekList:[],
			}
		},
		mounted() {
			axios.get('./dataHome.json').then( (res) => {
				/* console.log(res.data) */
				/* console.log(res.data.data[0]) */
				const msg = res.data.data[0];
				//空数组获取组件数组数据
				this.swiperList = msg.swiperList;
				this.IconList = msg.IconList;
				this.HotList = msg.HotList;
				this.LikeList = msg.LikeList;
				this.WeekList = msg.WeekList;
			} )
		}
	}
</script>

<style>
.home{
	background-color: #d6d6d6;
}
</style>
